function buildOption(optionItems: any) {
    return optionItems.map((item: any) => {
        return `<el-option label="${item.label}" value="${item.value}"/>\n`
    }).join("")
}

const elTemplates: any = {
    'el-input': (field: any) => {

        const options = field.options
        console.log("options", options)

        let selectText = ""
        if (options.placeholder) {
            selectText = `placeholder="${options.placeholder}"`
        }

        return `<el-input v-model="formData.${options.modelValue}" ${selectText}/>`
    },
    'el-select': (field: any) => {
        const options = field.options


        let selectText = ""
        if (options.placeholder) {
            selectText = `placeholder="${options.placeholder}"`
        }


        return `<el-select v-model="formData.${options.modelValue}" ${selectText}>
               ${buildOption(options.optionItems)}
        </el-select>`
    },
}


function getFormItemTemplate(field: any) {

    console.log("field", elTemplates[field.ele])

    const template = elTemplates[field.ele](field)


    const options = field.options
    let text = ''
    if (options.label) {
        text += `label="${options.label}" `
    }
    if (options.labelWidth) {
        text += `label-width="${options.labelWidth}" `
    }
    if (options.modelValue) {
        text += `props="${options.modelValue}" `
    }

    return `<el-form-item ${text}>\n${template}\n</el-form-item>`
}


export function genTemplate(formConfig: any, formDesigner: any) {


    const ele = formDesigner.map((field: any) => {
        return getFormItemTemplate(field)
    })


    let resultText = ''
    if (formConfig.formRef) {
        resultText += `ref="${formConfig.formRef}" `
    }
    if (formConfig.formModel) {
        resultText += `:model="${formConfig.formModel}" `
    }
    if (formConfig.size) {
        resultText += `size="${formConfig.size}" `
    }
    if (formConfig.labelPosition) {
        resultText += `label-position="${formConfig.labelPosition}" `
    }
    if (formConfig.labelWidth) {
        resultText += `label-width="${formConfig.labelWidth}" `
    }
    if (formConfig.formRule) {
        resultText += `:rules="{${formConfig.formRule}}" `
    }


    return `
      <el-form ${resultText}>
                ${ele.join("")}
     </el-form>`

}


/**
 * 获取 vue3 的 setup 的 js 代码
 * @param formConfig
 * @param formDesigner
 */
export function getVue3SetUpJS(formConfig: any, formDesigner: any) {


    return `
      import { ref, reactive } from 'vue'

      const ${formConfig.formModel} = ref({})
      const ${formConfig.formRef} = ref(null)

      `
}
